<template>

  <div>
    <el-select v-model="value" placeholder="请先选择一个模型">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <st3d-model v-if="value == 'obj+mtl'" src="static/models/obj_mtl/male02.obj" mtl="static/models/obj_mtl/male02.mtl" style="border:1px red solid;"></st3d-model>
    <st3d-model v-else :src="value" style="border:1px red solid;"></st3d-model>
  </div>
</template>

<script>
import st3dModel from '../../../web/components/pc/common/st-3d-model.vue'

export default {
  components: {st3dModel},
  name: "thd-model",
  data(){
    return {
      options: [{
        value: 'static/models/scene.json',
        label: 'json 模型'
      }, {
        value: 'static/models/tree.obj',
        label: 'obj 模型'
      },  {
        value: 'obj+mtl',
        label: 'obj+mtl 模型'
      },{
        value: 'static/models/dancing.fbx',
        label: 'fbx 模型'
      }, {
        value: 'static/models/gear.stl',
        label: 'stl 模型'
      }, {
        value: 'static/models/dae/elf.dae',
        label: 'dae 模型'
      }, {
        value: 'static/models/Lucy100k.ply',
        label: 'ply 模型'
      }, {
        value: 'static/models/Duck.gltf',
        label: 'gltf 模型'
      }],
      value: ''
    }
  },
  watch: {
    value(val){
      console.log(val)
    }
  }
}
</script>

<style scoped>

</style>